import './tag.less';

import React, {
  useEffect,
  useState,
} from 'react';

import {
  IRouteComponentProps,
  Link,
  useDispatch,
  useSelector,
} from 'umi';

import ArticleClassComponents
  from '@/components/articleClassComponents/articleClassComponents';
import RecommendedReading
  from '@/components/recommendedReading/recommendedReading';
import { ArticleTagType } from '@/types';
import _ from '@umijs/deps/compiled/lodash';

const Tag: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {
  const path = match.params.id
  console.log(path);
  let { ArticleTag, ArticleTagPage } = useSelector((state: { article: ArticleTagType }) => state.article)
  let dispatch = useDispatch()

  useEffect(() => {
    dispatch({
      type: "article/getArticleTag",
      payload: path
    })
    dispatch({
      type: "article/getArticleTagAll",
    })
  }, [path])

  let inds = Number(localStorage.getItem('ind'))
  const [ind, setInd] = useState(inds)

  let tabs = (item: ArticleTagType, index: number) => {
    setInd(index)
    localStorage.setItem('ind', JSON.stringify(index))
    localStorage.setItem('tabsName', item.label)
  }

  return (
    <div className='app-tag'>
      <div className='app-tag-left'>
        <div className='app-tag-top'>
          <div><h3 className='app-tag-top-h3'>{localStorage.getItem('tabsName')}</h3><span>分类文章</span>
            <p>共搜索到 <span className='app-tag-top-span'>{ArticleTagPage[1]}</span> 片文章</p>
          </div>
        </div>
        <div className='app-tag-tab'>
          <h3>文章标签</h3>
          <ul className='article-Tab-ul'>
            {
              ArticleTag && ArticleTag.map((item: ArticleTagType, index: number) => {
                return <Link key={index} to={`/tag/${item.value}`} onClick={tabs.bind(_, item, index)} id={'tag-Tab-ul-li'} className={index == ind ? 'article-Tab-ul-hotpink' : "article-Tab-ul-000"}> {item.label} [{item.articleCount}]</Link>
              })
            }
          </ul>
        </div>
        <div className='app-tag-main'>
          {
            ArticleTagPage[0] && ArticleTagPage[0].map((item: any, index: number) => {
              return <ul key={index} className='tag-main-ul'>
                <Link to={`/article/${item.id}`} className='tag-Tab-main-li ' >
                  <div className='tag-Tab-main-li-div'>
                    <h3 className='tag-Tab-main-li-div-h3'>{item.title}</h3> <span>6个月前</span> <span>{item.tags[0].label}</span>
                  </div>
                  <dl className='tag-Tab-main-li-dl' >
                    <dt className='tag-Tab-main-li-dt'>
                      <img src={item.cover} alt="" />
                    </dt>
                    <dd className='tag-Tab-main-li-dd'>
                      <div>
                        <p>{item.summary}</p>
                        <div className='tag-Tab-main-li-dd-div'>
                          <span className='tag-Tab-main-li-dd-div-span'> ❤{item.likes}</span> <span className='tag-Tab-main-li-dd-div-span'> 👁 {item.views}</span> <span className='tag-Tab-main-li-dd-div-span'> 🔗 分享</span>
                        </div>
                      </div>
                    </dd>
                  </dl>
                </Link>
              </ul>
            })
          }
        </div>
      </div>
      <div className='app-tag-right'>
        <div>
          <RecommendedReading></RecommendedReading>
        </div>
        <div>
          <ArticleClassComponents></ArticleClassComponents>
        </div>

      </div>

    </div>
  )
}

export default Tag






